<template>
    <div class="body">
        <div class="j_rz_top">
            <div class="j_rzt_box">
                <h1>军属认证</h1>
                <p>
                    军属认证是军政宝对用户军属身份的确认，认证通过后，<br />
                    用户将拥有更多权益。
                </p>
            </div>
            <form id="attes_form" method="post" enctype="multipart/form-data">
                <div class="j_rzc_box">
                    <div class="j_rzc_title">
                        <span>申请条件</span>
                    </div>

                    <div>
                        <div class="j_rzc_item">
                            <span>姓名</span>
                            <input
                                type="text"
                                id="realname"
                                placeholder=""
                                v-model="name"
                            />
                        </div>

                        <div class="j_rzc_item">
                            <span>身份证</span>
                            <input
                                type="text"
                                id="id_card"
                                placeholder=""
                                v-model="id_card"
                            />
                        </div>

                        <div class="j_rzc_item">
                            <span>军人证编号</span>
                            <input
                                type="text"
                                id="soldier_card"
                                placeholder=""
                                v-model="soldier_card"
                            />
                        </div>
                    </div>

                    <div class="j_rzc_title">
                        <span>上传证件</span>
                    </div>

                    <ul class="j_rzc_ul">
                        <li>
                            <h1 id="fileList1" v-show="!filesImg[0]">
                                <div class="upload_before" id="upload_before_1">
                                    <img
                                        src="../../assets/newimg/user/renz_icon_xiangjiz.png"
                                        alt=""
                                    />
                                    <p>拍摄身份证人像面</p>
                                </div>
                                <input
                                    class="file_upload"
                                    id="file_1"
                                    type="file"
                                    accept="image/*"
                                    name="portrait_image"
                                    @change="handleFiles($event, 0)"
                                />
                            </h1>
                            <h2 v-show="filesImg[0]">
                                <img :src="filesImg[0]" alt="" />
                            </h2>
                        </li>
                        <li>
                            <h1 id="fileList2" v-show="!filesImg[1]">
                                <div class="upload_before" id="upload_before_2">
                                    <img
                                        src="../../assets/newimg/user/renz_icon_xiangjif.png"
                                        alt=""
                                    />
                                    <p>拍摄身份证国徽面</p>
                                </div>
                                <input
                                    class="file_upload"
                                    id="file_2"
                                    type="file"
                                    accept="image/*"
                                    name="nation_image"
                                    @change="handleFiles($event, 1)"
                                />
                            </h1>
                            <h2 v-show="filesImg[1]">
                                <img :src="filesImg[1]" alt="" />
                            </h2>
                        </li>
                        <li>
                            <h1 id="fileList3" v-if="!filesImg[2]">
                                <div class="upload_before" id="upload_before_3">
                                    <img
                                        src="../../assets/newimg/user/renz_icon_xiangjiz.png"
                                        alt=""
                                    />
                                    <p>拍摄军人证照片面</p>
                                </div>
                                <input
                                    class="file_upload"
                                    id="file_3"
                                    type="file"
                                    accept="image/*"
                                    name="photo_image"
                                    @change="handleFiles($event, 2)"
                                />
                            </h1>
                            <h2 v-show="filesImg[2]">
                                <img :src="filesImg[2]" alt="" />
                            </h2>
                        </li>
                        <li>
                            <h1 id="fileList4" v-if="!filesImg[3]">
                                <div class="upload_before" id="upload_before_4">
                                    <img
                                        src="../../assets/newimg/user/renz_icon_xiangjif.png"
                                        alt=""
                                    />
                                    <p>拍摄军人证资料面</p>
                                </div>
                                <input
                                    class="file_upload"
                                    id="file_4"
                                    type="file"
                                    accept="image/*"
                                    name="info_image"
                                    @change="handleFiles($event, 3)"
                                />
                            </h1>
                            <h2 v-show="filesImg[3]">
                                <img :src="filesImg[3]" alt="" />
                            </h2>
                        </li>
                    </ul>

                    <div class="j_rzc_text">
                        请拍摄本人真实有效的身份证原件和军人证
                    </div>
                </div>
                <div class="j_btn_submit" @click="uploadFile">提交</div>
            </form>
            <van-overlay :show="allImglength" @click="allImglength = false">
                <van-loading color="#fff" size="1.3rem"
                    >图片上传中。。。</van-loading
                >
            </van-overlay>
            <div class="zhanwei"></div>
        </div>
    </div>
</template>

<script>
import { axiosPostnotoken, axiosPost } from '../../axios';
import { Toast } from 'vant';
window.URL = window.URL || window.webkitURL;
export default {
    name: '',
    data() {
        return {
            name: '',
            id_card: '',
            soldier_card: '',
            formData: new FormData(),
            filesImg: ['', '', '', ''],
            allImglength: false,
        };
    },
    computed: {},
    mounted() {},
    methods: {
        // 读取图片并压缩
        handleFiles(e, id) {
            this.allImglength = true;
            let inputFile = e.target.files[0];
            let that = this;
            if (inputFile) {
                if (
                    inputFile.type !== 'image/jpeg' &&
                    inputFile.type !== 'image/png' &&
                    inputFile.type !== 'image/gif'
                ) {
                    return Toast({
                        message: '不是有效的图片文件！',
                        duration: 1000,
                    });
                }

                const reader = new FileReader();
                reader.readAsDataURL(inputFile);
                reader.onload = function () {
                    let img = new Image();
                    img.src = this.result;
                    var width = 750, //图像大小
                        height = 1000, //图像大小
                        quality = 1, //图像质量
                        canvas = document.createElement('canvas'),
                        drawer = canvas.getContext('2d');
                    img.onload = function () {
                        const originHeight = img.height;
                        const originWidth = img.width;
                        let compressedWidth = img.height;
                        let compressedHeight = img.width;
                        if (originWidth > width && originHeight > height) {
                            // 更宽更高，
                            if (originHeight / originWidth > height / width) {
                                // 更加严重的高窄型，确定最大高，压缩宽度
                                compressedHeight = height;
                                compressedWidth =
                                    height * (originWidth / originHeight);
                            } else {
                                //更加严重的矮宽型, 确定最大宽，压缩高度
                                compressedWidth = width;
                                compressedHeight =
                                    width * (originHeight / originWidth);
                            }
                        } else if (
                            originWidth > width &&
                            originHeight <= height
                        ) {
                            // 更宽，但比较矮，以width作为基准
                            compressedWidth = width;
                            compressedHeight =
                                width * (originHeight / originWidth);
                        } else if (
                            originWidth <= width &&
                            originHeight > height
                        ) {
                            // 比较窄，但很高，取maxHight为基准
                            compressedHeight = height;
                            compressedWidth =
                                height * (originWidth / originHeight);
                        } else {
                            // 符合宽高限制，不做压缩
                        }
                        canvas.width = compressedWidth;
                        canvas.height = compressedHeight;
                        drawer.drawImage(
                            img,
                            0,
                            0,
                            canvas.width,
                            canvas.height
                        );
                        that.changeimg(
                            id,
                            canvas.toDataURL('image/jpg', quality)
                        );
                        e.target.value = '';
                    };
                };
            } else {
                return;
            }
        },
        //换取图片
        changeimg(id, url) {
            // console.log(id);
            axiosPostnotoken(
                '/api/upload/base64',
                {
                    image: url,
                },
                (res) => {
                    // console.log(res);
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 1000,
                        });
                    }
                    // console.log(res);
                    let filesImgcopy = this.filesImg.concat();
                    filesImgcopy[id] = res.data.src;
                    this.filesImg = filesImgcopy;
                    this.allImglength = false;
                }
            );
        },

        // 提交上传的图片
        uploadFile() {
            if (!this.name || !this.id_card || !this.soldier_card) {
                return Toast({
                    message: '请上传身份信息',
                    duration: 2000,
                });
            }
            this.filesImg.forEach((item) => {
                if (!item) {
                    return Toast({
                        message: '您有照片未上传',
                        duration: 2000,
                    });
                }
            });
            let params = {
                realname: this.name,
                id_card: this.id_card,
                soldier_card: this.soldier_card,
                portrait_image: this.filesImg[0],
                nation_image: this.filesImg[1],
                photo_image: this.filesImg[2],
                info_image: this.filesImg[3],
            };
            axiosPost('/api/user/identify', params, (res) => {
                // console.log(res);
                Toast({
                    message: res.msg,
                    duration: 2000,
                });
                if (res.status != 1) {
                    return;
                }
                this.$router.push('/');
            });
        },
    },
};
</script>

<style lang="less" scope>
.j_rz_top {
    width: 16rem;
    height: 17.4507rem;
    background: #fe333d url(../../assets/newimg/user/renz_img_peitu.png)
        11.072rem 0.448rem no-repeat;
    background-size: 6.592rem 5.44rem;
}

.j_rzt_box {
    width: 15.1467rem;
    margin: 0 auto 0.64rem;
    border-radius: 0.4267rem;
    overflow: hidden;
    padding: 0 0.3627rem;
}

.j_rzt_box h1 {
    font-size: 0.8533rem;
    font-weight: 500;
    color: #ffffff;
    margin-top: 0.9813rem;
    margin-bottom: 0.2347rem;
}

.j_rzt_box p {
    font-size: 0.4693rem;
    font-weight: 400;
    color: #ffbbbe;
    line-height: 0.54rem;
}

/* 开始中间部分 */
.j_rzc_title {
    margin: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.j_rzc_title span {
    font-size: 0.64rem;
    font-weight: 500;
    color: #000000;
    margin: 0.9387rem 0 0 0;
}

.j_rzc_box {
    width: 15.1467rem;
    margin: 0 auto 0;
    border-radius: 0.4267rem;
    background: #fff;
    padding: 0 0.64rem 0.8747rem;
}

.j_rzc_item {
    width: 13.0133rem;
    height: 2.1333rem;
    background: #f9f8f8;
    border-radius: 1.0667rem;
    margin: 0.6613rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.j_rzc_item span {
    width: 3.144rem;
    font-size: 0.5973rem;
    font-weight: 400;
    color: #858585;
}

.j_rzc_item input {
    width: 8.6613rem;
    height: 1.5rem;
    border: 0;
    background: transparent;
    padding: 0 0.5rem;
    font-size: 0.5973rem;
    font-weight: 400;
    color: #333;
    outline: none;
}

.j_rzc_ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.64rem;
}

.j_rzc_ul li {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.1867rem;
    height: 4.48rem;
    margin: 0.32rem;
    border-radius: 0.2133rem;
    box-shadow: 0 0 0.2133rem rgba(0, 0, 0, 0.1);
}

.j_rzc_ul li h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.j_rzc_ul li h1 .file_upload {
    opacity: 0;
    width: 6.1867rem;
    height: 4.48rem;
    position: absolute;
}

.j_rzc_ul li h1 .upload_after {
    display: none;
    width: 6.1867rem;
    height: 4.48rem;
}

.j_rzc_ul li h1 img {
    width: 3.648rem;
    height: 2.3253rem;
}

.j_rzc_ul li h1 p {
    font-size: 0.4693rem;
    font-weight: 500;
    color: #aaaaaa;
    text-align: center;
    margin-top: 0.256rem;
}

.j_rzc_ul li h2 {
    width: 6.1867rem;
    height: 4.48rem;
    overflow: hidden;
    border-radius: 0.2133rem;
}

.j_rzc_ul li h2 img {
    width: 100%;
}

.j_rzc_text {
    margin: 0.7467rem auto;
    font-size: 0.5973rem;
    font-weight: 500;
    color: #fe333d;
    text-align: center;
}

/* 按钮 */
.j_btn_submit {
    width: 13.0133rem;
    height: 2.1333rem;
    background: #fe333d;
    border-radius: 1.0667rem;
    text-align: center;
    line-height: 2.1333rem;
    margin: 0.8533rem auto;
    font-size: 0.7253rem;
    font-weight: 500;
    cursor: pointer;
    color: #ffffff;
}
</style>
